<template>
    <div>
        <h1>Test 组件</h1>
        <h1>{{num}}</h1>
        <input type="text" name="" id="" v-model="num">
        <button @click="add">点击加一</button>
        <h2>{{obj.name}}</h2>
        <input type="text" name="" id="" v-model="obj.name">
        <button @click="showObj">点击打印obj</button>
    </div>
</template>

<script lang="ts">
import { defineComponent,ref ,reactive} from 'vue'

export default defineComponent({
    setup () {
        let num = ref(0);//ref可以用来基础数据类型的双向数据绑定 要先引入ref
        console.log(num.value);
        function add(){
            num.value+=1;
        }
        let obj = reactive({
            name:'tom',
            age:19
        })
        function showObj(){
            console.log(obj);//是个proxy对象
        }
        
        return {
            num,
            add,
            obj,
            showObj
        }
    }
})
</script>

<style scoped>

</style>